<template>
    <view class="lucky-tips">
        <view class="grid-container">
            <!-- 吉时 -->
            <view class="tip-item">
                <view class="placeholder-box"></view>
                <tm-text class="tip-label" :font-size="28" label="吉时"></tm-text>
                <tm-text _class="text-weight-b" :font-size="28" color="#333" :label="fateInfo.lucky_time || ''"></tm-text>
            </view>

            <!-- 幸运方位 -->
            <view class="tip-item">
                <view class="placeholder-box"></view>
                <tm-text class="tip-label" :font-size="28" label="幸运方位"></tm-text>
                <tm-text _class="text-weight-b" :font-size="28" color="#333" :label="'喜神: ' + (fateInfo.lucky_direction || '')"></tm-text>
            </view>

            <!-- 相冲生肖 -->
            <view class="tip-item">
                <view class="placeholder-box"></view>
                <tm-text class="tip-label" :font-size="28" label="相冲生肖"></tm-text>
                <tm-text _class="text-weight-b" :font-size="28" color="#333" :label="fateInfo.zodiac_name || ''"></tm-text>
            </view>

            <!-- 幸运数字 -->
            <view class="tip-item">
                <view class="placeholder-box"></view>
                <tm-text class="tip-label" :font-size="28" label="幸运数字"></tm-text>
                <tm-text _class="text-weight-b" :font-size="28" color="#333" :label="fateInfo.lucky_num || ''"></tm-text>
            </view>

            <!-- 开运饰物 -->
            <view class="tip-item">
                <view class="placeholder-box"></view>
                <tm-text class="tip-label" :font-size="28" label="开运饰物"></tm-text>
                <tm-text _class="text-weight-b" :font-size="28" color="#333" :label="fateInfo.lucky_thing || ''"></tm-text>
            </view>

            <!-- 吉祥色彩 -->
            <view class="tip-item">
                <view class="placeholder-box"></view>
                <tm-text class="tip-label" :font-size="28" label="吉祥色彩"></tm-text>
                <tm-text _class="text-weight-b" :font-size="28" color="#333" :label="fateInfo.lucky_color || ''"></tm-text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "LuckyTips",
    props: {
        fateInfo: {
            type: Object,
            default: () => ({})
        }
    }
}
</script>

<style lang="less" scoped>
.lucky-tips {
    margin-top: 40rpx;
    padding: 0 30rpx;

    .title {
        margin-bottom: 24rpx;
        padding-left: 10rpx;
        border-left: 8rpx solid #A37C3D;
    }

    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 三列布局 */
        grid-gap: 24rpx; /* 格子间距 */
    }

    .tip-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .placeholder-box {
        width: 96rpx;
        height: 96rpx;
        background: #F5F1EA;
        border-radius: 16rpx;
        margin-bottom: 16rpx;
    }

    .tip-label {
        margin-bottom: 8rpx;
        color: #666666;
    }
}
</style>